import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

class SmallVidePage extends StatefulWidget {
  const SmallVidePage({Key key}) : super(key: key);

  @override
  _SmallVidePageState createState() => _SmallVidePageState();
}

class _SmallVidePageState extends State<SmallVidePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('小视频'),
        ),
        body: buildGridView());
  }

  List<String> initItemDatas() {
    List<String> datas = [
      'https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-clear-water-1559888911402.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-breathtaking-reflection-1572023479601.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2FHeaven.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2FOne-Swan.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-sunshine-between-white-grapes-1570036541225.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-clear-water-1559888911402.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-breathtaking-reflection-1572023479601.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2FHeaven.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2FOne-Swan.mp4',
      'https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-sunshine-between-white-grapes-1570036541225.mp4',
    ];
    return datas;
  }

  Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 6,
      mainAxisSpacing: 3,
      childAspectRatio: 9 / 16,
      children: initItemDatas().map((data) {
        return VidePage(data);
      }).toList(),
    );
  }
}

class VidePage extends StatefulWidget {
  //通过构造函数的方式，将他传入进来
  String dataSource;
  VidePage(this.dataSource);

  @override
  _VidePageState createState() => _VidePageState();
}

class _VidePageState extends State<VidePage> {
  VideoPlayerController controller;
  bool inits = false;

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width / 2;

    return GestureDetector(
      onTap: () {
        if (controller.value.isPlaying) {
          controller.pause();
        } else {
          controller.play();
        }
      },
      child: Column(
        children: [
          Container(
            width: width,
            height: 338,
            child: inits
                ? VideoPlayer(controller)
                : Container(
                    width: width,
                    height: 338,
                    color: Colors.pink,
                  ),
          ),

          ///进度条
          Visibility(
            visible: !inits,
            child: Container(
              height: 9,
              child: VideoProgressIndicator(
                controller,
                allowScrubbing: true,
                colors: VideoProgressColors(
                    playedColor: Colors.red[400],
                    bufferedColor: Colors.white,
                    backgroundColor: Colors.grey),
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    controller = VideoPlayerController.network(widget.dataSource);
    //初始化controller
    controller.initialize();
    //设置音量
    controller.setVolume(1.0);
    //添加监听
    controller.addListener(() {
      //获取controller里面的值
      print(controller.value);
      //判断是否初始化，没有初始化的话，马上初始化，并更新状态
      //inits 没有初始化
      //2 ！= 3
      /// false ！= ture
      if (inits != controller.value.initialized) {
        inits = controller.value.initialized;
        setState(() {});
      }

      //如果出现错误，输出错误
      if (controller.value.hasError) {
        print(controller.value.errorDescription);
      }
    });
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    controller.dispose();
    super.dispose();
  }
}
